import React, { Fragment, PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BorderTag from '../../../../components/tag-view/BorderTag'

export default class FilterView extends PureComponent {
  static propTypes = {
    dataArr: PropTypes.array,
    borderTagClick: PropTypes.func,
    activeLabel: PropTypes.string
  }

  render () {
    const { dataArr, borderTagClick, activeLabel } = this.props
    return (
      <View style={styles.container}>
        {
          dataArr.map((item, index) => {
            return (
              <View style={styles.itemView} key={index}>
                {
                  !!item.title &&
                  <Text style={styles.itemTitle}>{item.title}</Text>
                }
                <View style={styles.itemContentView}>
                  {item.content.map((item, index) => {
                    return (
                      <BorderTag
                        key={index}
                        switchType={'open'}
                        style={[styles.tagView, index % 4 === 0 && { marginLeft: 0 }]}
                        tagLabel={item.label}
                        params={item}
                        isActive={item.label === activeLabel}
                        onPress={borderTagClick}/>
                    )
                  })}
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: ScaleS(23)
  },
  contentContainer: {},
  itemView: {},
  itemTitle: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginTop: ScaleS(26)
  },
  itemContentView: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  tagView: {
    marginLeft: ScaleS(16),
    marginTop: ScaleS(24)
  },
  tagText: {
    color: '#666666',
    fontSize: ScaleT(14),
    fontWeight: '400'
  }
})
